Skip to main content

Chapter 5: Roads (Routes) of React !!

Routing is an essential part of any web application. In React, libraries like react-router make the task of adding navigation into your app seamless.

5. Routing in React​

a. Introduction to React Router:​

Get acquainted with the basic idea behind React Router and its importance in building single-page applications (SPAs).

Task: Set up a new React project and install react-router-dom. Create a simple app with three pages: Home, About, and Contact. Ensure that you can navigate between these pages using React Router.

b. Route Parameters:​

React Router allows you to access parameters from the URL, which can be useful for loading specific data based on the route.

Task: Add a "Profile" page to your app. This page should be able to display different user profiles based on the URL parameter (e.g., /profile/john should display John's profile). For now, you can use mock data.

c. Nested Routes:​

Sometimes, components rendered by a route will have routes of their own.

Task: In the previously mentioned Profile page, implement tabs like "Posts" and "Friends" which display different content without leaving the profile page entirely.

d. Redirects & Programmatically Navigating:​

Learn how to redirect users and programmatically change routes.

Task: If someone accesses a profile that doesn't exist (from the mock data), redirect them to a custom "404 Not Found" page. Also, after a user "logs in" (you can simulate this), programmatically navigate them to their profile page.

e. Protected Routes & Authentication:​

Not every route should be accessible to every user. Some routes might require authentication.

Task: Add a "Dashboard" page that's only accessible to logged-in users. If a logged-out user tries to access it, redirect them to a "Login" page.

f. Query Parameters & URL Search Params:​

URLs can have query parameters, which can be crucial for things like search functionality.

Task: Implement a search bar that updates the URL with the search query (e.g., /search?q=react). Display results based on the query parameter.

g. Route Transitions:​

Making transitions between routes smooth can enhance user experience.

Task: Implement fade transitions when navigating between the different pages of your app.

h. Hooks provided by React Router:​

React Router provides several hooks like useHistory, useLocation, useParams, and useRouteMatch which can be handy in various situations.

Task: On the Profile page, use the useParams hook to fetch and display the profile based on the URL parameter. Also, implement a "Go Back" button using the useHistory hook.

Project: Blogging Platform:​

  • Create a blogging platform where users can read, create, edit, and comment on blog posts.
  • Implement routes for listing all blog posts, viewing a single post, editing a post, and creating a new post.
  • Allow users to comment on a blog post on its dedicated page. Use nested routes to separate the comment section and the main post content.
  • Implement authentication. Protect the routes that allow creating and editing blog posts so that only authenticated users can access them.
  • Enhance the platform with features like search functionality, using query parameters to filter and display search results.
  • As a bonus, implement user profiles where users can see all their posts and edit their personal information.

By working through these tasks and projects, you will develop a solid grasp of how routing works in React applications, enabling you to architect sophisticated navigation flows with ease.

Routing is an essential part of any web application. In React, libraries like react-router make the task of adding navigation into your app seamless